﻿<Page
    x:Class="Microsoft.ALMRangers.VsarTreasureMap.WindowsStoreApp.Views.Category"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Microsoft.ALMRangers.VsarTreasureMap.WindowsStoreApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="using:Microsoft.ALMRangers.VsarTreasureMap.WindowsStoreApp.Converters"
    mc:Ignorable="d">
    <Page.Resources>
        <converters:BooleanToVisibility x:Key="trueMeansVisibleBooleanToVisibility" TrueMeansVisible="True"/>
        <converters:BooleanToVisibility x:Key="falseMeansVisibleBooleanToVisibility" TrueMeansVisible="False"/>
        <DataTemplate x:Key="standardItemTemplate">
            <Grid Width="300" HorizontalAlignment="Left" RightTapped="Button_RightTapped">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="5"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0" HorizontalAlignment="Left" Source="{Binding Image}" VerticalAlignment="Top" />
                <Grid Grid.Row="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="5"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource TitleTextStyle}" FontWeight="Bold"/>
                    <TextBlock Grid.Row="2" Text="{Binding Description}" TextWrapping="Wrap" Style="{StaticResource TitleTextStyle}" Margin="0,0,0,40"/>
                </Grid>
                <Grid Grid.Row="0" VerticalAlignment="Bottom">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0" HorizontalAlignment="Left">
                        <TextBlock Visibility="{Binding IsFavourite, Converter={StaticResource trueMeansVisibleBooleanToVisibility}}" Foreground="{StaticResource HighlightBrush}" FontFamily="Segoe UI Symbol" FontSize="48" Text="❤">
                            <ToolTipService.ToolTip>
                                <TextBlock x:Uid="/Content/FavouriteItem" Text="Favourited Item"/>
                            </ToolTipService.ToolTip>
                        </TextBlock>
                    </StackPanel>
                    <StackPanel Grid.Column="1" HorizontalAlignment="Right">
                        <Image Width="80" Height="80" Margin="0" ToolTipService.ToolTip="You've started going through the guidance in this project." Visibility="{Binding IsStarted, Converter={StaticResource trueMeansVisibleBooleanToVisibility}}" Source="ms-appx:///Assets/TreasureMapImages/TreasureMapImages/TreasureChest_Empty.png" />
                        <Image Width="80" Height="80" Margin="0" ToolTipService.ToolTip="You've completed all the guidance in this project." Visibility="{Binding IsCompleted, Converter={StaticResource trueMeansVisibleBooleanToVisibility}}" Source="ms-appx:///Assets/TreasureMapImages/TreasureMapImages/TreasureChest_Full.png" />
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>

    </Page.Resources>

    <Page.TopAppBar>
        <AppBar Background="White">
            <StackPanel Orientation="Horizontal">
                <Button Command="{Binding GoToHome}" Style="{StaticResource HomeAppBarButtonStyle}" FontSize="26.667" Margin="40,0,0,0" Foreground="Black"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>

    <Page.BottomAppBar>
        <AppBar Background="#FFFFFF">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Horizontal">
                    <Button Style="{StaticResource FilterAppBarButtonStyle}" Foreground="Black" Click="ShowFilterOptions"/>
                </StackPanel>
                <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
                    <Button Command="{Binding PinCategory}" Style="{StaticResource PinAppBarButtonStyle}" Foreground="Black"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid VerticalAlignment="Stretch">
        <Grid Background="{StaticResource BackgroundBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="140"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Command="{Binding GoBack}" Grid.Column="0" Style="{StaticResource BackButtonStyle}" Margin="0,32,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" />
                <TextBlock Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Text="{Binding CategoryTitle}" Margin="0,0,0,20" FontFamily="{StaticResource TitleFont}" Foreground="{StaticResource TitleBrush}" />
                <Button Grid.Column="1" Command="{Binding LaunchSearch}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,40,0" Style="{StaticResource TextButtonStyle}">
                    <TextBlock><Run FontFamily="Segoe UI Symbol" FontSize="24">&#xE11A;</Run><Run FontSize="24" xml:space="preserve"> Search</Run></TextBlock>
                </Button>
            </Grid>

            <ListView Grid.Row="2" TabIndex="-1" x:Name="projects" VerticalAlignment="Stretch" Padding="140,0,0,0" 
                      ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                      ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled" 
                      ItemsSource="{Binding Projects}" HorizontalContentAlignment="Left" 
                      ItemsPanel="{StaticResource HorizontalItemsPanel}" ItemContainerStyle="{StaticResource CategoryListViewItemStyle}" 
                      Tapped="ProjectsTapped" KeyUp="ProjectsKeyUp" TabNavigation="Local"
                      ItemTemplate="{StaticResource standardItemTemplate}">
                <ListView.Header>
                    <Grid Width="450" HorizontalAlignment="Left" Margin="0,4,20,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="20"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0" Source="{Binding CategoryImage}" VerticalAlignment="Top" />
                        <TextBlock Grid.Row="2" Margin="0" Text="{Binding CategoryDescription}" TextWrapping="Wrap" TextTrimming="WordEllipsis" Foreground="{StaticResource ContentForegroundBrush}" Style="{StaticResource BodyTextStyle}" VerticalAlignment="Top"/>
                    </Grid>
                </ListView.Header>
            </ListView>
        </Grid>

        <Popup HorizontalAlignment="Right" VerticalAlignment="Bottom" IsLightDismissEnabled="True" x:Name="hintPopup" Height="180" Width="360" Margin="0,0,80,80">
            <Grid Width="360" Height="180" Background="White">
                <Grid Margin="20" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="10"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <TextBlock Foreground="Black" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}">Did you know? The AppBar has additional functionality for you to use. You can pin this page to the start screen &amp; filter what projects are listed here.</TextBlock>
                    <Button Grid.Row="2" Click="ShowAppBar" HorizontalAlignment="Right" Style="{StaticResource DarkButtonStyle}">Open AppBar now</Button>
                </Grid>
            </Grid>
        </Popup>

        <Popup VerticalAlignment="Bottom" IsLightDismissEnabled="True" x:Name="filterOptions" Height="100" Margin="20,0,0,100">
            <Grid Background="White">
                <Border BorderThickness="2" BorderBrush="Black">
                    <StackPanel Margin="0,5,0,5" Height="100">
                        <Button Command="{Binding ApplyFilter}" CommandParameter="None" Content="None" Style="{StaticResource PopupMenuButtonStyle}" Click="CloseFilterOptions" />
                        <Button Command="{Binding ApplyFilter}" CommandParameter="ByCompleted" Content="By completed" Style="{StaticResource PopupMenuButtonStyle}" Click="CloseFilterOptions" />
                        <Button Command="{Binding ApplyFilter}" CommandParameter="ByNotCompleted" Content="By not completed" Style="{StaticResource PopupMenuButtonStyle}" Click="CloseFilterOptions" />
                    </StackPanel>
                </Border>
            </Grid>
        </Popup>
    </Grid>
</Page>